import React from 'react'
import '../../styles/myJump/condition.css'
import moment from "moment"
import axios from 'axios'
import Axios from 'axios';
import Topic from './topic';
import Video from './video'
import Program from './program';
import Song from './song';
axios.default.widthCredentials = true

class Condition extends React.Component {
    constructor() {
        super()
        this.state = {
            data: [],
        }
    }

    componentDidMount() {
        let uid = localStorage.getItem('token')
        // /user/event?uid=32953014
        Axios.get('http://localhost:4000/user/event?uid=' + uid)
            .then(res => {
                // console.log(res)
                this.setState({
                    data: res.data.events,
                })
            })

    }

    render() {
        let { data } = this.state
        return (
            <div className='cond-jump-wrap'>
                <ul>
                    {data.map((item, i) => {
                        // console.log(item, i)
                        let ctime = moment(parseInt(item.eventTime)).format('YYYY-MM-DD')
                        let duration = JSON.parse(item.json)
                        // console.log(duration)

                        return (
                            <li key={i} className='cond-jump-list' >
                                <div className='cond-jump-img clearfix'>
                                    <img src={item.user.avatarUrl} alt="" />
                                    <div className='cond-jump-title'>
                                        <p>{item.user.nickname}的分享：</p>
                                        <span>{ctime}</span>
                                    </div>
                                </div>
                                <div>
                                    <p className='own-dynamics-pl'>{duration.msg}</p>
                                    <div className='own-dynamics-rlg'>
                                        {(()=>{
                                            if(duration.topic){
                                                return <Topic />
                                            }else if(duration.video){
                                                return <Video/>
                                            }else if(duration.program){
                                                return <Program />
                                            }else if(duration.song){
                                                return <Song />
                                            }else{
                                                return null
                                            }
                                        })()}
                                    </div>
                                </div>
                            </li>
                        )
                    })}
                </ul>
            </div>
        )
    }
}

export default Condition